import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_jd/pages/goods/detail/controller.dart';
import 'package:flutter_jd/routes/routing_constants.dart';
import 'package:flutter_jd/tools/utils/library.dart';
import 'package:flutter_jd/ui/widgets/share/share_sheet.dart';
import 'package:flutter_jd/ui/widgets/preview/picture_view.dart';
import 'package:flutter_jd/ui/widgets/body/tab_navigator.dart';
import 'package:flutter_jd/ui/widgets/kit.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:get/route_manager.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

// 商品详情
class GoodsDetail extends GetView<GoodsDetailController> {
  final Map arguments;
  GoodsDetail({required this.arguments});

  @override
  Widget build(BuildContext context) {
    Get.put(GoodsDetailController(arguments: arguments));
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark,
      child: Material(
        child: Scaffold(
          body: Column(
            children: [
              Expanded(
                child: Stack(children: <Widget>[
                  MediaQuery.removePadding(
                    context: context,
                    removeTop: true,
                    child: NotificationListener(
                      onNotification: (e) {
                        if (e is ScrollUpdateNotification && e.depth == 0) {
                          controller.onScroll(e.metrics.pixels);
                        }
                        return true;
                      },
                      child: SingleChildScrollView(
                        child: Container(
                          color: Color(0xFFF2F2F2),
                          padding: EdgeInsets.only(bottom: 12.h),
                          child: Column(
                            children: [
                              _buildGoodsImages(),
                              _buildGoodsInfo(),
                              _buildDiscount(),
                              _buildActivity(),
                              _buildRanking(),
                              _buildComment()
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                  _buildTopBar(context)
                ]),
              ),
              _buildBottomBar()
            ],
          ),
        ),
      ),
    );
  }

  // 顶部区域
  Widget _buildTopBar(BuildContext context) {
    return Obx(
      () => Container(
        height: 80,
        padding: EdgeInsets.fromLTRB(
          0,
          MediaQueryData.fromWindow(window).padding.top,
          12.w,
          0,
        ),
        color: Colors.white.withOpacity(controller.appBarAlpha.value),
        child:
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          Container(
            height: double.infinity,
            padding: EdgeInsets.only(left: 5.w, right: 10.h),
            child: GestureDetector(
              onTap: () {
                Get.back();
              },
              child: Container(
                padding: EdgeInsets.all(5.r),
                color: Colors.transparent,
                child: Kit.iconFont(0xe671, Color(0xFF333333), 18.sp),
              ),
            ),
          ),
          Container(
            width: 90.w,
            child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
              GestureDetector(
                onTap: () {
                  showBottomSheet(context);
                },
                child: Container(
                  padding: EdgeInsets.all(5.r),
                  margin: EdgeInsets.only(right: 10.w),
                  child: Kit.iconFont(0xe625, Color(0xFF333333), 18.sp),
                ),
              ),
              GestureDetector(
                onTap: () {
                  showMenus(context);
                },
                child: Container(
                  padding: EdgeInsets.all(5.r),
                  child: Kit.iconFont(0xe6d3, Color(0xFF333333), 18.sp),
                ),
              ),
            ]),
          ),
        ]),
      ),
    );
  }

  // 商品图片
  Widget _buildGoodsImages() {
    return Column(
      children: [
        AspectRatio(
          aspectRatio: 1 / 1,
          child: Stack(
            children: [
              PageView.builder(
                itemCount: controller.imgList.length,
                controller: controller.pageController,
                onPageChanged: (index) {
                  controller.onPageChanged(index);
                },
                itemBuilder: (context, index) {
                  final String imgUrl = controller.imgList[index];
                  return GestureDetector(
                    onTap: () {
                      Get.to(
                        () => PictureView(
                          imgList: controller.imgList,
                          initialPage: index,
                          onPageChanged: (index) {
                            // controller.pictureIndex = index + 1;
                            controller.onPageChanged(index);
                            controller.pageController.animateToPage(
                              index,
                              duration: Duration(
                                milliseconds: 10,
                              ),
                              curve: Curves.easeIn,
                            );
                          },
                        ),
                        transition: Transition.fadeIn,
                        fullscreenDialog: true,
                        duration: Duration(
                          milliseconds: 400,
                        ),
                        opaque: false, // 透明
                      );
                    },
                    child: Container(
                      color: Colors.white,
                      child: Stack(
                        fit: StackFit.expand,
                        children: [
                          // 底部图片
                          Image.network(
                            imgUrl,
                            fit: BoxFit.contain,
                          ),
                          Hero(
                            tag: imgUrl,
                            child: Container(
                              child: Image.network(
                                imgUrl,
                                fit: BoxFit.contain,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
              Positioned(
                bottom: 15.h,
                right: 15.w,
                child: Container(
                  width: 50.w,
                  height: 20.h,
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(0, 0, 0, 0.3),
                    borderRadius: BorderRadius.circular(20.r),
                  ),
                  alignment: Alignment.center,
                  child: Obx(
                    () => Text(
                      "${controller.pictureIndex}/${controller.imgList.length}",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12.0.sp,
                        letterSpacing: 1.6.w,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }

  // 商品信息
  Widget _buildGoodsInfo() {
    return Container(
      padding: EdgeInsets.symmetric(
        vertical: 12.h,
        horizontal: 18.w,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          top: BorderSide(
            color: Color(0xFFF9F9F9),
          ),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                '¥',
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
              Text(
                controller.arguments['price'].toString(),
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 22.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
              Text(
                '.00',
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.only(top: 5.h),
            child: Text(
              controller.arguments['name'],
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 15.5.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 15.h),
            child: Text(
              '抢券立减900元，限时套装特惠，加599起得AirPods套装！春季新配色紫色火热抢购中！更多优惠！ ',
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Color(0xFF999999),
                fontSize: 11.5.sp,
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(vertical: 5.h),
            child: Text(
              '查看>',
              style: TextStyle(
                color: Colors.red,
                fontSize: 11.5.sp,
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 优惠
  Widget _buildDiscount() {
    return Container(
      height: 55.h,
      margin: EdgeInsets.only(top: 12.h),
      padding: EdgeInsets.fromLTRB(18.w, 12.h, 10.w, 12.h),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(10.r),
        ),
      ),
      child: Row(
        children: [
          Container(
            child: Text(
              '优惠',
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 18.w),
              child: Row(
                children: [
                  Text(
                    '使用优惠预估价',
                    style: TextStyle(
                      color: Color(0xFF555555),
                      fontSize: 12.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 3.w, top: 2.5.h),
                    child: Text(
                      '¥9.99',
                      style: TextStyle(
                        color: Colors.red,
                        fontSize: 12.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
          Container(
            child: Kit.iconFont(
              0xe605,
              Color(0xFF888888),
              22.sp,
            ),
          ),
        ],
      ),
    );
  }

  // 活动
  Widget _buildActivity() {
    return Container(
      height: 55.h,
      margin: EdgeInsets.only(top: 0.6.h),
      padding: EdgeInsets.fromLTRB(18.w, 12.h, 10.r, 12.h),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(
          bottom: Radius.circular(10.r),
        ),
      ),
      child: Row(
        children: [
          Container(
            child: Text(
              '活动',
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 18.w),
              child: Row(
                children: [
                  Text(
                    '店铺秒杀活动，即时抢！',
                    style: TextStyle(
                      color: Color(0xFF555555),
                      fontSize: 12.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  )
                ],
              ),
            ),
          ),
          Container(
            child: Kit.iconFont(
              0xe7e7,
              Color(0xFF888888),
              16.sp,
            ),
          ),
        ],
      ),
    );
  }

  // 排行榜
  Widget _buildRanking() {
    return Container(
      height: 55.h,
      margin: EdgeInsets.only(top: 12.h),
      padding: EdgeInsets.fromLTRB(18.w, 12.h, 10.w, 12.h),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.horizontal(
          left: Radius.circular(10.r),
          right: Radius.circular(10.r),
        ),
      ),
      child: Row(
        children: [
          Container(
            width: 17.r,
            height: 17.r,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Color(0xFFFA2F19),
                  Color(0xFFFA722E),
                ],
              ),
              borderRadius: BorderRadius.circular(3),
            ),
            child: Kit.iconFont(
              0xe604,
              Colors.white.withOpacity(0.9),
              11.sp,
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 8.w),
            child: Text(
              '排行榜',
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 12.w),
              child: Text(
                '98%用户好评创意配件热卖排行榜第 3 名',
                maxLines: 1,
                style: TextStyle(
                  color: Color(0xFF555555),
                  fontSize: 12.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
          Container(
            child: Kit.iconFont(
              0xe7e7,
              Colors.black,
              16.sp,
            ),
          ),
        ],
      ),
    );
  }

  // 评论
  _buildComment() {
    return GestureDetector(
      onTap: () {
        Utils.showStatus();
        Get.toNamed(GoodsCommentRoute);
      },
      child: Container(
        height: 55.h,
        margin: EdgeInsets.only(top: 12.h),
        padding: EdgeInsets.fromLTRB(18.w, 12.h, 10.w, 12.h),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.horizontal(
            left: Radius.circular(10.r),
            right: Radius.circular(10.r),
          ),
        ),
        child: Row(
          children: [
            Container(
              width: 3.3.w,
              height: 17.h,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color(0xFFFA2F19),
                    Color(0xFFF89EB4),
                  ],
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 5.w),
              child: Text(
                '评价',
                style: TextStyle(
                  fontSize: 15.sp,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(left: 5.w, top: 3.h),
                child: Text(
                  '300万+',
                  maxLines: 1,
                  style: TextStyle(
                    color: Color(0xFF333333),
                    fontSize: 11.sp,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
            Row(
              children: [
                Text(
                  '好评度98%',
                  maxLines: 1,
                  style: TextStyle(
                    color: Color(0xFF888888),
                    fontSize: 11.5.sp,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 3),
                  child: Kit.iconFont(0xe7e7, Colors.black, 16.sp),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  // 底部区域
  _buildBottomBar() {
    return Container(
      color: Colors.white,
      child: Column(
        children: [
          Container(
            height: 50.h,
            color: Colors.white,
            padding: EdgeInsets.only(left: 5.w, right: 12.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  children: [
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 12.w),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Kit.iconFont(0xe70a, Color(0xFF333333), 22.sp),
                          Container(
                            child: Text(
                              '店铺',
                              style: TextStyle(
                                fontSize: 9.sp,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 12.w),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Kit.iconFont(0xe8cf, Color(0xFF333333), 22.sp),
                          Container(
                            child: Text(
                              '客服',
                              style: TextStyle(
                                fontSize: 9.sp,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        Get.off(
                          () => TabNavigator(
                            initTab: 3,
                          ),
                          transition: Transition.noTransition,
                        );
                      },
                      child: Container(
                        padding: EdgeInsets.symmetric(horizontal: 12.w),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Kit.iconFont(0xe621, Color(0xFF333333), 22.sp),
                            Container(
                              child: Text(
                                '购物车',
                                style: TextStyle(
                                  fontSize: 9.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
                Container(
                  child: Row(
                    children: [
                      Container(
                        width: 100.w,
                        height: 35.h,
                        margin: EdgeInsets.only(right: 10.w),
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              Color(0xFFF20300),
                              Color(0xFFFE4C16),
                            ],
                          ),
                          borderRadius: BorderRadius.circular(20.r),
                        ),
                        alignment: Alignment.center,
                        child: Text(
                          '加入购物车',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 13.sp,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                      Container(
                        width: 100.w,
                        height: 35.h,
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              Color(0xFFFFA800),
                              Color(0xFFFEBB00),
                            ],
                          ),
                          borderRadius: BorderRadius.circular(20.r),
                        ),
                        alignment: Alignment.center,
                        child: Text(
                          '立即购买',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 13.sp,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
          Container(
            height: MediaQueryData.fromWindow(window).padding.bottom,
          )
        ],
      ),
    );
  }

  // 显示菜单
  void showMenus(BuildContext context) {
    showMenu(
      context: context,
      position: RelativeRect.fromLTRB(1, 90, 0, 0),
      items: <PopupMenuEntry>[
        buildShowMenuItem('消息'),
        PopupMenuDivider(),
        buildShowMenuItem('购物车'),
        PopupMenuDivider(),
        buildShowMenuItem('浏览记录'),
        PopupMenuDivider(),
        buildShowMenuItem('功能反馈'),
      ],
      color: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5.r),
      ),
    );
  }

  buildShowMenuItem(String name) {
    return PopupMenuItem(
      child: Text(
        name,
        style: TextStyle(fontSize: 15.sp),
      ),
      height: 25.h,
      padding: EdgeInsets.only(left: 20.w),
    );
  }

  // 显示底部弹窗
  void showBottomSheet(BuildContext context) {
    showModalBottomSheet(
      builder: (BuildContext context) {
        return ShareSheet();
      },
      context: context,
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.r)),
    );
  }
}
